<template>
	<!-- <uni-nav-bar style="font-weight: bold;" title="我的关注" :fixed="true" :statusBar="true" :border="false"
		leftWidth="200rpx" rightWidth="200rpx">
		<template v-slot:left>
			<view style="height: 60rpx;width: 60rpx;" @tap="nav_back">
				<image style="width: 100%;height: 100%;"
					src="https://mcdn.chatgk.com/xcx/static/images/public/nav_back.png"></image>
			</view>
		</template>
	</uni-nav-bar> -->

	<view class="container-major-detail flex-column">
		<view class="container-top">
			<text class="container-top-item" :class="selectIndex == 0 ? 'select':''" @tap="onClickTopItem(0)">
				院校
			</text>
			<text class="container-top-item" :class="selectIndex == 1 ? 'select':''" @tap="onClickTopItem(1)">
				专业
			</text>
			<text class="container-top-item" :class="selectIndex == 2 ? 'select':''" @tap="onClickTopItem(2)">
				职业
			</text>
			<text class="container-top-item" :class="selectIndex == 3 ? 'select':''" @tap="onClickTopItem(3)">
				文章
			</text>
		</view>
		<!-- 指示器 -->
		<view class="whiteview">
			<view class="view-line animation" :style="lineStyle">
			</view>
		</view>

		<scroll-view class="container-scroll background-color-F8F8F8" scroll-y="true" scroll-with-animation="true">
			<view v-if="selectIndex == 0">
				<search-collegecell class="marjor-college-item" v-for="(item,index) in collectCollegeList"
					:key="item.sid" :data="item" @tap="onClickCollegeCell(item)"
					:isShowContrastBtn="false"></search-collegecell>
				<view class="morebox" v-show="collectCollegeList.length<1">
					<image class="noData" src="https://mcdn.chatgk.com/xcx/static/images/wode/noData.png" mode=""></image>
					<view class="morebox_1">
						您还没有关注的院校
					</view>
					<view class="morebox_1">
						先去关注您喜欢的院校吧
					</view>
					<view class="morebox_2" @click="goguanzhu(0)">
						<text class="morebox_2_txt">添加院校</text>
					</view>
				</view>
			</view>

			<view v-else-if="selectIndex == 1">
				<!-- <view style="background-color: #fff;" v-for="(item,index) in collectMajorList"
					@tap="clickMajorCell(item)">
					<view class="flex-row center-row space-between" style="padding-top: 32rpx;">
						<view class="majorRankTitle">
							{{item.name}}
						</view>
						<image style="width: 20rpx; height: 20rpx; margin-right: 32rpx;"
							src="https://mcdn.chatgk.com/xcx/static/images/ping/ping-mian-more-img.png" mode="aspectFit"></image>
					</view>
					<view style="background-color: #F8F8F8; width: 100%; height: 2rpx; margin-top: 32rpx;">
					</view>
				</view> -->
				<major-job-cell v-for="(item, index) in collectMajorList" :item="item" :type="0"
					:key="'major' + index"></major-job-cell>
				<view class="morebox" v-show="collectMajorList.length<1">
					<image class="noData" src="https://mcdn.chatgk.com/xcx/static/images/wode/noData.png" mode=""></image>
					<view class="morebox_1">
						您还没有关注的专业
					</view>
					<view class="morebox_1">
						先去关注您喜欢的专业吧
					</view>
					<view class="morebox_2" @click="goguanzhu(1)">
						<text class="morebox_2_txt">添加专业</text>
					</view>
				</view>
			</view>
			<view v-else-if="selectIndex == 2">
				<!-- <view style="background-color: #fff;" v-for="(item,index) in collectJobList" @tap="clickJobCell(item)">
					<view class="flex-row center-row space-between" style="padding-top: 32rpx;">
						<view class="majorRankTitle">
							{{item.name}}
						</view>
						<image style="width: 20rpx; height: 20rpx; margin-right: 32rpx;"
							src="https://mcdn.chatgk.com/xcx/static/images/ping/ping-mian-more-img.png" mode="aspectFit"></image>
					</view>
					<view style="background-color: #F8F8F8; width: 100%; height: 2rpx; margin-top: 32rpx;">
					</view>
				</view> -->
				<major-job-cell v-for="(item, index) in collectJobList" :item="item" :type="1"
					:key="'job' + index"></major-job-cell>
				<view class="morebox" v-show="collectJobList.length<1">
					<image class="noData" src="https://mcdn.chatgk.com/xcx/static/images/wode/noData.png" mode=""></image>
					<view class="morebox_1">
						您还没有关注的职业
					</view>
					<view class="morebox_1">
						先去关注您喜欢的职业吧
					</view>
					<view class="morebox_2" @click="goguanzhu(2)">
						<text class="morebox_2_txt">添加职业</text>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="morebox" v-show="collectNewsList.length<1">
					<image class="noData" src="https://mcdn.chatgk.com/xcx/static/images/wode/noData.png" mode=""></image>
					<view class="morebox_1">
						您还没有关注的文章
					</view>
					<view class="morebox_1">
						先去关注您喜欢的文章吧
					</view>
				</view>

				<view class="view-news-item flex-row center-row" v-for="(item,index) in collectNewsList" :key="index"
					@tap="clickNewsCell(item)">
					<view :style="'width:' + (item.image_url && item.image_url.length > 0 ? '430rpx;':'620rpx')">
						<text class="text-news-title">{{item.title}}</text>

						<view class="flex-row center-row" style="margin-top: 20rpx;">
							<text class="text-news-subtitle"
								space="nbsp">{{item.source + "  " + $tool.timeago(item.update_time)}}</text>
							<image style="width: 30rpx; height: 20rpx; margin: 0 5rpx 0 20rpx;"
								src="https://mcdn.chatgk.com/xcx/static/images/public/eyes_n.png" mode="aspectFit">
							</image>
							<text class="text-news-subtitle">{{$tool.formatReadNum(item.view_total)}}</text>
						</view>
					</view>

					<image v-if="item.image_url && item.image_url.length > 0" class="image-news"
						:src="'https://mcdn.chatgk.com' + item.image_url" mode="aspectFit"></image>
				</view>
			</view>
		</scroll-view>
		<loading v-show="loadshow"></loading>
	</view>

</template>

<script>
	import MajorJobCell from '@/components/major-job-cell/major-job-cell.vue'
	import userManager from '@/common/manager/user-manager.js'
	export default {
		data() {
			return {
				loadshow: false,
				selectIndex: 0,
				lineStyle: "margin-left: calc(12.5% - 18rpx)",
				collectCollegeList: [],
				collectMajorList: [],
				collectJobList: [],
				collectNewsList: [],
			}
		},
		components: {
			MajorJobCell
		},
		onLoad() {

		},
		onShow() {
			this.loadshow = true
			this.$request.likeList({
				"detail": "1"
			}).then(res => {
				this.loadshow = false
				this.collectCollegeList = res.data["schoolDetail"]
				this.collectMajorList = res.data["majorDetail"]
				this.collectJobList = res.data["jobDetail"]
				this.collectNewsList = res.data["newsDetail"]
			})
		},

		methods: {
			nav_back() {
				uni.navigateBack()
			},
			goguanzhu(i) {
				if (i == 0) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/searchcollege/home-searchcollege'
					})
				} else if (i == 1) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/searchmajor/seemajor?tab=2'
					})
				} else {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/seejob/seejobnew?tab=2'
					})
				}
			},
			onClickTopItem(index) {
				this.selectIndex = index
				this.lineStyle = "margin-left: calc(12.5% - 18rpx + " + index * 25 + "%)"
			},
			// 点击学校列表
			onClickCollegeCell(college) {
				uni.navigateTo({
					url: '/subpackages/subpackage1/pages/searchcollege/collegeDetails/college-details?data=' + JSON
						.stringify(college)
				})
			},
			clickMajorCell(majordata) {
				uni.navigateTo({
					url: "/subpackages/subpackage1/pages/searchmajor/search-major-majordetail?code=" + majordata
						.code
				})
			},
			clickJobCell(jobdata) {
				//job_code
				uni.navigateTo({
					url: "/subpackages/subpackage1/pages/seejob/seejobdetail?code=" + jobdata.code
				})
			},
			clickNewsCell(newsdata) {
				uni.navigateTo({
					url: '/subpackages/subpackage1/pages/searchcollege/collegeDetails/news-details?data=' +
						encodeURIComponent(JSON
							.stringify(newsdata))
				})
			}
		}
	}
</script>

<style>
	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.align-center {
		align-items: center;
	}

	.space-between {
		display: flex;
		justify-content: space-between;
	}

	.morebox {
		margin: auto;
		display: flex;
		flex-direction: column;
	}

	.noData {
		width: 280rpx;
		height: 216rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
		margin-top: 320rpx;
	}

	.morebox_1 {
		margin: 0 auto;
		padding-bottom: 10rpx;
		text-align: center;
		color: #999999;
		font-size: 28rpx;
	}

	.morebox_2 {
		width: 232rpx;
		height: 76rpx;
		border-radius: 38rpx;
		border: 1rpx solid #FF3B0A;
		margin: auto;
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.morebox_2_txt {
		font-size: 28rpx;
		color: #FF3B0A;
	}

	.container-major-detail {
		position: relative;
		z-index: 9999;
		height: 100vh;
	}

	.whiteview {
		background-color: white;
		margin-bottom: 10rpx;
	}

	.container-top {
		display: flex;
		flex-direction: row;
	}

	.container-top-item {
		color: #464646;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fff;
		width: 33vw;
		text-align: center;
		font-weight: bold;
	}

	.container-top-item.select {
		color: #FF3B0A;
	}

	.view-line {
		position: relative;
		height: 4rpx;
		width: 36rpx;
		background-color: red;
		/* margin-left: calc(10% - 12rpx); */
		margin-top: -15rpx;
	}

	.view-line.animation {
		transition-duration: 0.2s;
		transition-property: all;
	}

	.container-scroll {
		position: absolute;
		left: 0;
		right: 0;
		top: 100rpx;
		/* bottom: calc(env(safe-area-inset-bottom)); */
		z-index: 10000;
		height: 100%;
		background-color: #F8F8F8;
	}

	.marjor-college-item {
		height: 150rpx;
		background-color: #fff
	}

	.majorRankTitle {
		padding-left: 32rpx;
		font-size: 28rpx;
		color: #464646;
		font-weight: bold;
	}

	.view-news-item {
		margin: 24rpx 32rpx 0rpx 32rpx;
		padding: 20rpx 26rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.text-news-title {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.text-news-subtitle {
		font-size: 22rpx;
		color: #999999;
	}

	.image-news {
		width: 184rpx;
		height: 120rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
	}

	.picture {
		/* margin-top: 200rpx; */
		width: 280rpx;
		height: 200rpx;
	}
</style>